<template>
  <div class="store_container">
    编辑门店
    <div class="store_wrapper">
      <div class="line_box">
        <div class="line_title">店铺等级</div>
        <div class="input_box">
          <el-select v-model="select" placeholder="请选择创建店铺等级">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <!-- 门店名称 -->
      <div class="line_box">
        <div class="line_title">门店名称</div>
        <div class="input_box">
          <el-input v-model="shopname" placeholder="请输入门店名称"></el-input>
        </div>
      </div>
      <!-- 门店电话 -->
      <div class="line_box">
        <div class="line_title">门店电话</div>
        <div class="input_box">
          <el-input v-model="shopname" placeholder="请输入门店电话"></el-input>
        </div>
      </div>
      <!-- 所在省份 -->
      <div class="line_box">
        <div class="line_title">所在省份</div>
        <div class="input_box">
          <v-distpicker
            province="省"
            city="市"
            area="区"
            @selected="onSelected"
          ></v-distpicker>
        </div>
      </div>
      <!-- 详细地址 -->
      <div class="line_box">
        <div class="line_title">详细地址</div>
        <div class="input_box">
          <el-input v-model="shopname" placeholder="请输入详细地址"></el-input>
        </div>
      </div>
      <!-- 门店logo -->
      <div class="line_box">
        <div class="line_title">门店logo</div>
        <div class="input_box">
        </div>
      </div>
      <!-- 门店展示 -->
      <div class="line_box">
        <div class="line_title">门店展示</div>
        <div class="input_box">
        </div>
      </div>
      <!-- 按钮 -->
      <div class="line_box">
        <div class="line_title"></div>
        <div class="input_box leftk">
          <el-button type="primary" @click="publishStore">发布</el-button>
          <el-button type="primary" @click="publishStore">重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
import { addStore } from "../../network/http";

export default {
  components: {
    VDistpicker,
  },
  data() {
    return {
      shopname: "",
      select: "",
      options: [
        {
          value: "选项1",
          label: "一级店铺",
        },
        {
          value: "选项2",
          label: "二级店铺",
        },
      ],
    };
  },
  methods: {
    // 省市区
    onSelected(data) {
      console.log(123123123,data)
      this.address.province = data.province.value;
      this.address.city = data.city.value;
      this.address.county = data.area.value;
    },
    // 发布
    publishStore(){
      
    }
  },
};
</script>

<style scoped>
.store_wrapper {
  width: 1200px;
  margin-left: 50px;
  margin-top: 50px;
}
.line_box {
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  height: 50px;
}
.input_box {
  width: 50%;
  margin-left: 30px;
  /* height: 50px; */
}
.leftk {
  margin-left: 100px;
}
.leftk button {
  margin: 0 50px;
}
.line_title {
  font-weight: 700;
  font-size: 16px;
}
.count_box {
  margin-left: 30px;
  width: 27%;
}
.img_box {
  margin-left: 30px;
  font-size: 14px;
  /* button {
      margin-top: 5px;
    } */
}
</style>